<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>简单的jQuery手风琴效果</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="xinxi_solution_main">
        <div class="xinxi_solution_bg">
            <div class="main_mobile">
                <ul>
                    <li class="one on">
                        <div class="left"></div>
                        <div class="left_top">
                            <i>工业类</i><img src="images/button1.png" alt="工业">
                        </div>
                        <div class="right">
                            <dl>
                                <a title="食品加工行业解决方案" target="_blank" href="#">
                                       食品加工行业解决方案</a>
                                <a title="汽车零部件行业解决方案" target="_blank" href="#">
                                       汽车零部件行业解决方案</a>
                                <a title="家具生产行业解决方案  " target="_blank" href="#">
                                       家具生产行业解决方案   </a>
                                <a title="智能生产制造解决方案" target="_blank" href="#">
                                       智能生产制造解决方案</a>
                                <a title="食品加工行业解决方案" target="_blank" href="#">
                                       食品加工行业解决方案</a>
                            </dl>
                        </div>
                    </li>
                    <li class="one">
                        <div class="left"></div>
                        <div class="left_top">
                            <i>商贸类</i><img src="images/button1.png" alt="工业">
                        </div>
                        <div class="right">
                            <dl style="margin-top: -120px;">
                                <a title="手机通讯行业解决方案" target="_blank" href="#">
                                       手机通讯行业解决方案</a>
                                <a title="五金配件行业解决方案" target="_blank" href="#">
                                       五金配件行业解决方案</a>
                                <a title="家电卖场行业解决方案" target="_blank" href="#">
                                       家电卖场行业解决方案</a>
                            </dl>
                        </div>
                    </li>
                    <li class="one">
                        <div class="left"></div>
                        <div class="left_top">
                            <i>服务类</i><img src="images/button1.png" alt="工业">
                        </div>
                        <div class="right">
                            <dl>
                                <a title="餐饮行业解决方案" target="_blank" href="#">
                                       餐饮行业解决方案</a>
                                <a title="会员解决方案" target="_blank" href="#">
                                       会员解决方案</a>
                            </dl>
                        </div>
                    </li>
                    <li class="one">
                        <div class="left"></div>
                        <div class="left_top">
                            <i>售后服务</i><img src="images/button1.png" alt="工业">
                        </div>
                        <div class="right">
                            <dl>
                                <a title="软件服务支持" target="_blank" href="#">
                                      软件服务支持</a>
                            </dl>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
$(function() {
    $('.xinxi_solution_main ul li:eq(0)').addClass('on');
    $('.xinxi_solution_main ul li:eq(1)').addClass('b2');
    $('.xinxi_solution_main ul li:eq(2)').addClass('b3');
    $('.xinxi_solution_main ul li:eq(3)').addClass('b4');
    $('.xinxi_solution_main ul li:eq(4)').addClass('b5');
    $('.xinxi_solution_main ul li:eq(5)').addClass('b6');
    $('.xinxi_solution_main ul li:gt(3)').hide();
    //当三级分类大于7个的是，成两排显示
    $('.xinxi_solution_main ul li').each(function() {
        var len = $(this).find('.right dl a').length;
        if (len > 6) {
            $(this).find('.right dl a').addClass('yichu');
        }
    });

    //解决方案效果
    $('.xinxi_solution_main ul li').each(function() {
        var left_h = $(this).find('.left_top').height();
        $(this).find('.left_top').css({
            'top': '50%',
            'margin-top': -left_h / 2
        });

        var dl_h = $(this).find('.right dl').height();
        $(this).find('.right dl').css({
            'margin-top': -dl_h / 2
        });
    });
    $('.xinxi_solution_main ul li').click(function() {
        $(this).addClass('on').siblings().removeClass('on');
    });
    $('.xinxi_solution_main_mobile ul li:first-child').addClass('on');

    $('.xinxi_solution_main_mobile ul li').click(function() {
        $(this).addClass('on').siblings().removeClass('on');
    });

    $(".solu-category .solu-description").each(function() {
        var maxwidth = 60;
        if ($(this).text().length > maxwidth) {
            $(this).text($(this).text().substring(0, maxwidth));
            $(this).html($(this).html() + '...');
        }
    });

});
</script>

</html>
